{% stylesheet %}
.block_image_text .content_wrap {
  position: relative;
}

.block_image_text.float_box {
  color: #fff;
}

.block_image_text.float_box h2 {
  color: #fff !important;
}

@media screen and (max-width: 767px) {
  .block_image_text.float_box .content_wrap {
    background-color: #0f0c0d;
    padding: 20px;
  }
}

@media screen and (min-width: 768px) {
  .block_image_text.float_box .content_wrap {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .block_image_text.float_box .text_content {
    position: absolute;
    max-width: 80%;
  }
  .block_image_text.float_box .image_box {
    position: relative;
  }
  .block_image_text.float_box .image_box .mask {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(0deg, rgba(33, 28, 28, 0.7) 0%, rgba(33, 28, 28, 0) 136.62%);
  }
}

.block_image_text .image_box {
  margin-bottom: 35px;
}

.block_image_text .image_box img {
  width: 100%;
}

.block_image_text .text_content {
  box-sizing: border-box;
}

@media screen and (min-width: 1201px) {
  .block_image_text .text_content {
    margin: 0 108px;
  }
}

.block_image_text .text_content .subtitle {
  text-transform: uppercase;
  font-size: 12px;
  font-weight: bold;
  margin-bottom: 12px;
}

@media screen and (max-width: 767px) {
  .block_image_text .text_content .content {
    display: flex;
    flex-direction: column;
    gap: 25px;
  }
  .block_image_text .text_content .content h2 {
    line-height: 30px;
  }
}

@media screen and (min-width: 768px) {
  .block_image_text .text_content .content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 60px;
  }
}

.block_image_text .text_content .content h2 {
  color: var(--title_color);
  font-weight: 500;
  font-size: 40px;
}

@media screen and (max-width: 767px) {
  .block_image_text .text_content .content h2 {
    font-size: 28px;
  }
}

{% endstylesheet %}

{% assign data = section.settings %}
<div class="block_image_text container_wrapper {% if data.float %}float_box{% endif %}">
    <div class="content_wrap">
        <div class="image_box">
						{% include 'lazy_img', file_type:"banner", src:data.image.src,  alt:data.image.alt %}

            <div class="mask"></div>
        </div>
        <div class="text_content">
            {%- if data.subtitle != '' and data.float == false -%}
            <div class="subtitle">
                {{data.subtitle}}
            </div>
            {%- endif -%}
            <div class="content">
                <div>
                    {%- if data.subtitle != '' and data.float -%}
                    <div class="subtitle">
                        {{data.subtitle}}
                    </div>
                    {%- endif -%}
                    {% if data.title != '' %}
                    <h2><p>{{data.title}}</p></h2>
                    {% endif %}
                </div>
                
                <div>
                    {% if data.detail != '' %}
                    <p>{{data.detail}}</p>
                    {% endif %}
                    {%- if data.btn_text != '' -%}
					<div class="animation_btn">
						<a href="{{ data.link | setUrlDataFrom:data_from}}" class="main_btn">
							<span>{{data.btn_text}}</span>
							<svg viewBox="0 0 22 14" fill="none" aria-hidden="true" focusable="false" role="presentation"
								class="icon icon-button-arrow" xmlns="http://www.w3.org/2000/svg">
								<path
									d="M15.1712 1.15214L14.9895 0.98149L14.8183 1.16262L14.3286 1.68074L14.1561 1.86323L14.3393 2.03491L18.9951 6.39689L1 6.3969L0.75 6.3969L0.75 6.6469L0.75 7.35665L0.75 7.60665L1 7.60665L18.9955 7.60665L14.3393 11.9722L14.1549 12.1451L14.3298 12.3276L14.8195 12.8386L14.9907 13.0173L15.1711 12.8479L21.2041 7.18404L21.3981 7.00183L21.2041 6.81956L15.1712 1.15214Z"
									fill-rule="evenodd" clip-rule="evenodd" fill="currentColor"></path>
							</svg>
						</a>
					</div>
                    {%- endif -%}
                </div>
            </div>
        </div>
    </div>
   
</div>
{% schema %}
{
	"tag": "",
	"class": "block_image_text",
	"icon": "icon-tuwen",
	"is_global": false,
	"name": {
		"zh_CN": "图文",
		"en_US": "Image and text"
	},
	"max_blocks": "",
	"settings": [
		{
			"type": "card_header",
			"label": {
				"zh_CN": "设置",
				"en_US": "Settings"
			}
		},
		{
			"type": "card_switch",
			"label": {
				"zh_CN": "文字浮动(PC端生效)",
				"en_US": "Text float (PC enabled)"
			},
			"default": false,
			"id": "float"
		},
		{
			"type": "card_image",
			"label": {
				"zh_CN": "图片",
				"en_US": "Image"
			},
			"default": {
				"src": "",
				"alt": ""
			},
			"info": {
				"zh_CN": "建议宽度1000px以上，高度自适应",
				"en_US": "Recommended width more than 1000px, height adaptive"
			},
			"id": "image"
		},
		{
			"type": "card_input",
			"label": {
				"zh_CN": "标题",
				"en_US": "Title"
			},
			"id": "title",
			"default": ""
		},
		{
			"type": "card_input",
			"label": {
				"zh_CN": "二级标题",
				"en_US": "Secondary title"
			},
			"id": "subtitle",
			"default": ""
		},
		{
			"type": "card_text_editor",
			"label": {
				"zh_CN": "简短描述",
				"en_US": "Short description"
			},
			"id": "detail",
			"default": ""
		},
		{
			"type": "card_input",
			"label": {
				"zh_CN": "按钮文字",
				"en_US": "Button text"
			},
			"id": "btn_text",
			"default": "show now"
		},
		{
			"type": "card_page_link",
			"label": {
				"zh_CN": "按钮链接",
				"en_US": "Button link"
			},
			"default": {
				"type": "",
				"title": "",
				"url": ""
			},
			"id": "link"
		}
	],
	"blocks": [],
	"default": {
		"settings": {
			"title": "Our Bestsellers are Always Available",
			"subtitle": "BESTSELLERS",
			"detail": "All our clothes are offered in eight standard sizes. We make it easy to find everything you need online, and your order is conveniently shipped to your home.",
			"btn_text": "show now",
			"link": {
				"type": "",
				"title": "",
				"url": ""
			},
			"image": {
				"src": "",
				"alt": ""
			},
			"float": false
		},
		"blocks": []
	}
}
{% endschema %}